<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue';
import DwUserMenu from './index.vue'
import { UserInfo, UpDateUserName, UpDateUserArea, ACRM } from '../../../http/api'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { Edit } from '@element-plus/icons-vue'
import Cookies from 'js-Cookie';
import cascader from '../../../components/cascader/index.vue'
import { transformationGoTime, YMDHMS } from '../../../utils/timeer'
const user_info = ref({}) as any
onMounted(async () => {
  await UserInfo().then((res: any) => {
    if (res !== undefined) {
      user_info.value = res
      user_info.value.updated_at = transformationGoTime(user_info.value.updated_at)
      ruleForm.name = res.username
      ruleForm.city_id = res.city_id
      ruleForm.district_id = res.district_id
      ruleForm.city_id = res.city_id


    }
  })
  await ACRM(user_info.value.city_id).then((res: any) => {
    user_info.value.city = res.area
    ruleForm.city = res.area
  })
  await ACRM(user_info.value.district_id).then((res: any) => {
    user_info.value.district = res.area
    ruleForm.district = res.area
  })
})
const dialogVisible = ref<boolean>(false)


const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
  name: '',
  city_id: 0,
  district_id: 0,
  city: '',
  district: ''

})

const validateArea = (_rule: any, value: any, callback: any) => {
  if (value === user_info.value.district_id) {
    return callback(new Error('请选择新的地区'))
  }
  setTimeout(() => {
    callback()
  }, 200)
}
const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 15, message: '字数应该在2到15之间', trigger: 'blur' },
  ],
  district_id: [
    { validator: validateArea, trigger: 'blur' }
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, _fields) => {
    if (valid && ruleForm.name !== user_info.value.username) {
      await UpDateUserName({ username: ruleForm.name }).then((res: { access_token: string, code: number, msg: string }) => {
        if (res.code === 611111) {
          Cookies.set('AccessToken', res.access_token)
          Cookies.set('username', ruleForm.name, { expires: 1 })
          user_info.value.username = ruleForm.name
          ElMessage.success('更改成功')
        }
      })
      dialogVisible.value = false
    } else {
    }
  })
}

const dialogVisible2 = ref<boolean>(false)


const change = (data: any) => {
  ruleForm.city_id = data[1][0]
  ruleForm.district_id = data[1][1]
  ruleForm.city = data[2][0]
  ruleForm.district = data[2][1]
}
const ruleFormRef2 = ref<FormInstance>()
const submitForm2 = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, _fields) => {
    if (valid) {
      await UpDateUserArea({ city_id: ruleForm.city_id, district_id: ruleForm.district_id }).then((res: any) => {
        if (res.code === 611111) {
          Cookies.set('AccessToken', res.access_token)
          Cookies.set('username', ruleForm.name, { expires: 1 })
          user_info.value.city = ruleForm.city
          user_info.value.district = ruleForm.district
          user_info.value.district_id = ruleForm.district_id
          user_info.value.city_id = ruleForm.city_id
          user_info.value.updated_at = YMDHMS()
          ElMessage.success('更改成功')
        }
      })
      dialogVisible2.value = false
    }
  })
}
</script>

<template>
  <div>
    <el-row>
      <el-col :span="20" :offset="2">
        <div class="dw-user-body">
          <el-row>
            <el-col :span="4" style="height: 600px;">
              <dw-user-menu></dw-user-menu>
            </el-col>
            <el-col :span="20">

              <div style="padding: 30px;">
                <el-descriptions title="账号信息" :column="1" border>
                  <el-descriptions-item label="id">{{ user_info.id }}</el-descriptions-item>
                  <el-descriptions-item label="用户名">{{ user_info.username }}
                    <el-button style="margin-left:20px" @click="dialogVisible = true" type="primary" :icon="Edit"
                      circle />
                  </el-descriptions-item>
                  <el-descriptions-item label="级别">
                    <el-tag v-if="user_info.super_admin" type="danger">超级管理员</el-tag>
                    <el-tag v-else-if="user_info.high_admin" type="info">市级管理员</el-tag>
                    <el-tag v-else-if="user_info.mid_admin" type="success">区级管理员</el-tag>
                    <el-tag disable-transitions style="margin-left: 10px" v-else>普通用户</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="地区">{{ user_info.city }}{{ user_info.district }}
                    <el-button style="margin-left:20px" @click="dialogVisible2 = true" type="primary" :icon="Edit"
                      circle />
                  </el-descriptions-item>
                  <el-descriptions-item label="最新更改时间">{{ user_info.updated_at }}</el-descriptions-item>
                </el-descriptions>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
  <el-dialog v-model="dialogVisible" title="修改用户名字" width="30%">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize"
      status-icon>
      <el-form-item label="用户名" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确认修改
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogVisible2" title="修改地区" width="30%">
    <el-form ref="ruleFormRef2" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
      :size="formSize" status-icon>
      <el-form-item label="地区" prop="district_id">
        <cascader :msg="'area'" :value="[ruleForm.city_id, ruleForm.district_id]" @change="change" />
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm2(ruleFormRef2)">
          确认修改
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

  
<style scoped>
.dw-user-body {
  background-color: white;
  min-height: 600px;
}
</style>
  